<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-select class="ElInput" v-model="chargeChargeMode">
          <el-option label="全部" :value="''"></el-option>
          <el-option label="单次收费" :value="0"></el-option>
          <el-option label="周期收费" :value="1"></el-option>
          <el-option label="仪表收费" :value="2"></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" @click="getCharge()"></el-button>
        <el-button type="success" @click="toAddCharge()">添加</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="250"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              prop="chargeType"
              label="收费项目"
              width="180">
            <template slot-scope="scope">
              {{scope.row.chargeType ==0?"业务费": scope.row.chargeType == 1? "水费": scope.row.chargeType == 2? "电费": scope.row.chargeType == 3? "燃气费":"收费项目"}}
            </template>
          </el-table-column>
          <el-table-column
              prop="chargeChargeMode"
              label="计费方式"
              width="180">
            <template slot-scope="scope">
              {{scope.row.chargeChargeMode ==0?"单词收费": scope.row.chargeChargeMode == 1? "周期收费": scope.row.chargeChargeMode == 2? "仪表收费":"是否审核通过"}}
            </template>
          </el-table-column>
          <el-table-column
              prop="chargeNum"
              label="单价">
          </el-table-column>
          <el-table-column
              prop="chargeFormula"
              label="单位">
            <template slot-scope="scope">
              {{scope.row.chargeFormula ==0?"元": scope.row.chargeFormula == 1? "角": scope.row.chargeFormula == 2? "分":"单位"}}
            </template>
          </el-table-column>
          <el-table-column
              prop="chargeOverdueFine"
              label="滞纳金">
          </el-table-column>
          <el-table-column
              prop="chargeState"
              label="状态 "
              width="180">
            <template slot-scope="scope">
              <el-switch
                  style="margin-left: 50px"
                  @change="updateStatus(scope.row)"
                  v-model="scope.row.chargeState"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="0"
                  :inactive-value="1">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="toUpdate(scope.row)">修改</el-button>
              <el-button type="warning" @click="delCharge(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
        <!--分页-->
        <!-- 增改弹窗 -->
        <!-- Form -->
        <el-dialog title="增改"
                   :visible.sync="dialogFormVisible"
                   :before-close="closeExpertFormDialog">
          <el-form :model="chargeForm" ref="ruleForm">
            <el-form-item label="单价">
              <el-input v-model="chargeForm.chargeNum"></el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-select v-model="chargeForm.chargeFormula">
                <el-option label="元" :value="0"></el-option>
                <el-option label="角" :value="1"></el-option>
                <el-option label="分" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账单名称">
              <el-input v-model="chargeForm.chargeName"></el-input>
            </el-form-item>
            <el-form-item label="计费方式">
              <el-select v-model="chargeForm.chargeChargeMode">
                <el-option label="周期收费" :value="0"></el-option>
                <el-option label="单次收费" :value="1"></el-option>
                <el-option label="仪表收费" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收费项目">
              <el-select v-model="chargeForm.chargeType">
                <el-option label="业务费" :value="0"></el-option>
                <el-option label="水费" :value="1"></el-option>
                <el-option label="电费" :value="2"></el-option>
                <el-option label="燃气费" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="滞纳金">
              <el-input v-model="chargeForm.chargeOverdueFine"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdateCharge('insert')">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 增改弹窗 -->
        <!-- Form -->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=pageRquset.pageNum
        :page-sizes="[5, 10, 20, 30]"
        :page-size=pageRquset.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
    <!--分页-->

  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      chargeChargeMode:'',
      pageRquset: {
        pageSize: 5,
        pageNum: 1
      },
      chargeForm:{
        id:0,
        chargeName:'',
        chargeType:'',
        chargeChargeMode:'',
        chargeNum:'',
        chargeFormula:'',
        chargeOverdueFine:'',
        chargeState:'',
        createTime:'',
        updateTime:'',
        chargeDelFlag:'',
      },
      restChargeForm:{
        id:0,
        chargeName:'',
        chargeType:'',
        chargeChargeMode:'',
        chargeNum:'',
        chargeFormula:'',
        chargeOverdueFine:'',
        chargeState:'',
        createTime:'',
        updateTime:'',
        chargeDelFlag:'',
      },
      currentPage2: 1,
      dialogFormVisible:false,
      total:0,
      input: '',
      tableData: [],
    }
  },
  /*自动挂载*/
  mounted() {
    this.getCharge()
  },
  /*函数*/
  methods:{
    /*收费项目管理全查*/
    getCharge () {
      this.$axios.get('/memberLwh/charge/getCharge', {
        params: {
          chargeChargeMode: this.chargeChargeMode,
          pageSize: this.pageRquset.pageSize,
          pageNum: this.pageRquset.pageNum
        }
      }).then(res => {
        this.tableData = res.data.obj.content
        this.total = res.data.obj.total
      }).catch(error => {
        console.log(error)
      })
    },
    updateStatus(data) {
      this.$axios.post('memberLwh/charge/saveOrUpdateCharge',data).then(res => {
        if (res.data.code === 200){
          if (data.chargeState === 0) {
            this.MyMessage('启用成功','success')
          }
          if (data.chargeState === 1) {
            this.MyMessage('停用成功','success')
          }
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*分页*/
    handleSizeChange (val) {
      this.pageRquset.pageSize = val
      this.getCharge()
    },
    handleCurrentChange (val) {
      this.pageRquset.pageNum = val
      this.getCharge()
    },
    /*收费项目管理删除*/
    delCharge (id) {
      debugger
      this.$confirm('是否删除这条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/memberLwh/charge/delCharge', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.MyMessage('删除成功', 'sussess')
            this.getCharge()
          } else {
            this.MyMessage('删除失败', 'warning')
          }
        }).catch(res => {
          this.MyMessage('删除失败,请联系管理员', 'error')
          this.insertLog("收费项目管理删除")
        })
      }).catch(() => {
        this.MyMessage('已取消删除', 'info')
      })
    },
    // 账单增改
    saveOrUpdateCharge (formName) {
      // const formData = new FormData()
      this.$axios.post('/memberLwh/charge/saveOrUpdateCharge', this.chargeForm
      ).then(res => {
        if (res.data.code === 200) {
          this.dialogFormVisible = false
          this.MyMessage('增改成功', 'sussess')
          this.chargeForm = this.restChargeForm
          this.getCharge()
        } else {
          this.MyMessage('增改失败', 'warning')
          this.insertLog("收费项目管理增改")
          this.getCharge()
        }
      })
    },
    // 添加点击X关闭是清空from表单数据
    closeExpertFormDialog (done) {
      this.$refs.ruleForm.resetFields()
      done()// done 用于关闭 Dialog
      this.chargeForm = {}
    },
    // 添加弹窗里的取消按钮 点击取消是清空from表单数据
    resetForm (formName) {
      this.getCharge();
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
      this.chargeForm = {}
    },
    // 修改的回显
    toUpdate (charge) {
      this.chargeForm = charge
      this.dialogFormVisible = true
    },
    //添加按钮
    toAddCharge(){
      this.dialogFormVisible = true
      this.chargeForm = {
        id: 0
      }
    },
    /*提示框*/
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>